C.S.Burner 🪙 ━►🔥GIT Node

T8b949e

Tff7b72<templateTff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"flex-1 overflow-y-auto w-full pb-[max(1rem,env(safe-area-inset-bottom))]"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"border-b border-gray-200 dark:border-zinc-800 px-4 py-4 md:px-6 md:py-5"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between lg:gap-6"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"space-y-2 min-w-0 flex-1"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"text-2xl md:text-3xl font-black text-gray-900 dark:text-white tracking-tight"Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"tools.power_tools"Tff7b72) Tff7b72}}

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"text-sm text-gray-600 dark:text-gray-300 leading-relaxed max-w-xl"Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"tools.diagnostics_description"Tff7b72) Tff7b72}}

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"w-full lg:max-w-sm shrink-0"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"relative group"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"Tff7b72>

Tff7b72<MaterialDesignIcon

Te6edf3icon-name=Ta5d6ff"magnify"

Te6edf3class=Ta5d6ff"size-5 text-gray-400 group-focus-within:text-blue-500 transition-colors"

Tff7b72/>

Tff7b72</div>

Tff7b72<input

Te6edf3v-model=Ta5d6ff"searchQuery"

Te6edf3type=Ta5d6ff"text"

Te6edf3:placeholder=Ta5d6ff"$t('common.search')"

Te6edf3class=Ta5d6ff"w-full pl-10 pr-10 py-3 bg-gray-50 dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500/40 focus:border-blue-500 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 text-sm"

Tff7b72/>

Tff7b72<button

Te6edf3v-if=Ta5d6ff"searchQuery"

Te6edf3class=Ta5d6ff"absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"

Te6edf3type=Ta5d6ff"button"

@Te6edf3click=Ta5d6ff"searchQuery = ''"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"close-circle" Te6edf3class=Ta5d6ff"size-5" Tff7b72/>

Tff7b72</button>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"p-4 md:p-6 xl:p-8 w-full max-w-6xl xl:max-w-7xl 2xl:max-w-384 mx-auto"Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"rounded-lg overflow-hidden border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"grid grid-cols-1 lg:grid-cols-2 divide-y divide-gray-200 dark:divide-zinc-800 divide-x-0 lg:divide-x lg:divide-y"

Tff7b72>

Tff7b72<RouterLink

Te6edf3v-for=Ta5d6ff"tool in filteredTools"

Te6edf3:key=Ta5d6ff"tool.name"

Te6edf3:to=Ta5d6ff"tool.comingSoon ? '' : tool.route"

Te6edf3:class=Ta5d6ff"

[

'tool-row',

tool.customClass,

tool.comingSoon ? 'opacity-60 grayscale-[0.5] cursor-default' : '',

].filter(Boolean)

"

@Te6edf3click=Ta5d6ff"tool.comingSoon ? $event.preventDefault() : null"

Tff7b72>

Tff7b72<div Te6edf3:class=Ta5d6ff"tool.iconBg"Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3v-if=Ta5d6ff"tool.icon" Te6edf3:icon-name=Ta5d6ff"tool.icon" Te6edf3class=Ta5d6ff"w-6 h-6" Tff7b72/>

Tff7b72<img

Te6edf3v-else-if=Ta5d6ff"tool.image"

Te6edf3:src=Ta5d6ff"tool.image"

Te6edf3:class=Ta5d6ff"tool.imageClass"

Te6edf3:alt=Ta5d6ff"tool.imageAlt"

Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"flex-1 min-w-0"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"flex items-center gap-2 flex-wrap"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"tool-card__title"Tff7b72>Tff7b72{{ Te6edf3toolTe6edf3.title Tff7b72}}Tff7b72</div>

Tff7b72<span

Te6edf3v-if=Ta5d6ff"tool.alpha"

Te6edf3class=Ta5d6ff"px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 rounded-sm border border-violet-200 dark:border-violet-800"

Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"tools.alpha_badge"Tff7b72) Tff7b72}}

Tff7b72</span>

Tff7b72<span

Te6edf3v-if=Ta5d6ff"tool.beta"

Te6edf3class=Ta5d6ff"px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded-sm border border-amber-200 dark:border-amber-800"

Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"tools.beta_badge"Tff7b72) Tff7b72}}

Tff7b72</span>

Tff7b72<span

Te6edf3v-if=Ta5d6ff"tool.comingSoon"

Te6edf3class=Ta5d6ff"px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider bg-gray-100 dark:bg-zinc-800 text-gray-500 dark:text-gray-400 rounded-sm border border-gray-200 dark:border-zinc-700"

Tff7b72>

Soon

Tff7b72</span>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"tool-card__description"Tff7b72>

Tff7b72{{ Te6edf3toolTe6edf3.description Tff7b72}}

Tff7b72</div>

Tff7b72<div Te6edf3v-if=Ta5d6ff"!tool.comingSoon" Te6edf3class=Ta5d6ff"shrink-0 flex items-center gap-1"Tff7b72>

Tff7b72<div Te6edf3v-if=Ta5d6ff"tool.extraAction" Te6edf3class=Ta5d6ff"flex items-center gap-2"Tff7b72>

Tff7b72<a

Te6edf3:href=Ta5d6ff"tool.extraAction.href"

Te6edf3:target=Ta5d6ff"tool.extraAction.target"

Te6edf3class=Ta5d6ff"p-2 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors text-gray-400 hover:text-blue-500"

@click.stop

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3:icon-name=Ta5d6ff"tool.extraAction.icon" Te6edf3class=Ta5d6ff"size-5" Tff7b72/>

Tff7b72</a>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"chevron-right" Te6edf3class=Ta5d6ff"tool-card__chevron" Tff7b72/>

Tff7b72</div>

Tff7b72<MaterialDesignIcon v-else Te6edf3icon-name=Ta5d6ff"chevron-right" Te6edf3class=Ta5d6ff"tool-card__chevron" Tff7b72/>

Tff7b72</div>

Tff7b72</RouterLink>

Tff7b72</div>

Tff7b72<div

Te6edf3v-if=Ta5d6ff"filteredTools.length === 0"

Te6edf3class=Ta5d6ff"mt-6 rounded-lg border border-dashed border-gray-300 dark:border-zinc-700 px-4 py-12 text-center"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"magnify" Te6edf3class=Ta5d6ff"w-12 h-12 mx-auto mb-4 text-gray-400" Tff7b72/>

Tff7b72<div Te6edf3class=Ta5d6ff"text-gray-600 dark:text-gray-400"Tff7b72>Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"common.no_results"Tff7b72) Tff7b72}}Tff7b72</div>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "../MaterialDesignIcon.vue";

import { listTools } from "../../js/registries/toolsRegistry.js";

export default {

name: "ToolsPage",

components: {

MaterialDesignIcon,

},

data() {

return {

rnodeLogoPath: "/rnode-flasher/reticulum_logo_512.png",

searchQuery: "",

};

},

computed: {

tools() {

return listTools();

},

filteredTools() {

const toolsWithTranslations = this.tools.map((tool) => ({

...tool,

title: tool.title || (tool.titleKey ? this.$t(tool.titleKey) : ""),

description: tool.description || (tool.descriptionKey ? this.$t(tool.descriptionKey) : ""),

}));

if (!this.searchQuery.trim()) {

return toolsWithTranslations;

}

const query = this.searchQuery.toLowerCase().trim();

return toolsWithTranslations.filter((tool) => {

return (

tool.title.toLowerCase().includes(query) ||

tool.description.toLowerCase().includes(query) ||

tool.name.toLowerCase().includes(query)

);

});

},

};

Tff7b72</script>

Tff7b72<style scopedTff7b72>

@reference "../../style.css";

.tool-row {

@apply flex items-start sm:items-center gap-3 sm:gap-4 px-4 py-3.5 min-h-17 transition-colors;

@apply hover:bg-gray-50 dark:hover:bg-zinc-900/80 active:bg-gray-100 dark:active:bg-zinc-800/80;

}

.tool-card__icon {

@apply w-11 h-11 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center shrink-0;

}

.tool-card__title {

@apply text-base sm:text-lg font-semibold text-gray-900 dark:text-white;

}

.tool-card__description {

@apply text-sm text-gray-600 dark:text-gray-300 mt-0.5 line-clamp-2 sm:line-clamp-none;

}

.tool-card__chevron {

@apply w-5 h-5 text-gray-400 shrink-0;

}

Tff7b72</style>